<template>
	<view class="text-white bg-mask sw-page">
		<cu-custom bgColor="nav-bg-blue" :isBack="true">
			<block slot="content"> 
				扫码乘车
			</block>
		</cu-custom>
		<view class="qrcode-box sw-qrcode">
			<uqrcode ref="uqrcode" style="padding: 20px;" />
		</view>
		<view class="reflash" @click="make()">
			<text class="cuIcon-flashlightopen"></text>
			<text>请点击二维码刷新</text>
		</view>
		<view class="bag-box bg-grey">
			钱包余额: 5.60
		</view>
		<view class="bag-desc">
			{{desc}}
		</view>
	</view>
</template>

<script>
	import uQRCode from '@/components/uqrcode/common/uqrcode'

	export default {
		data() {
			return {
				qrcodeSize: 216,
				qrcodeText: 'uQRCode 2.0.23 更新时间：2021-08-09',
				qrcodeSrc: '',
				qrcodeTextRandom: '',
				desc: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
			}
		},
		onLoad() {
			// 在onReady中调用绘制二维码方法，尽量不要在onLoad中
		},
		onReady() {
			this.make()
		},
		methods: {
			make() {
				this.$refs
					.uqrcode
					.make({
						size: this.qrcodeSize,
						text: this.qrcodeText,
						enableDelay: true // 启用延迟绘制
					})
					.then(res => {
						// 返回的res与uni.canvasToTempFilePath返回一致
						this.qrcodeSrc = res.tempFilePath
					})
					.finally(() => {
					})
			}
		}
	}
</script>

<style>
	.sw-page{
		height: 100vh;
	}
	.sw-qrcode{
		width: 286px;
		height: 264px;
		background-color: #ffffff;
		margin: 48px auto;
		margin-bottom: 0;
		-webkit-border-radius: 4px;
		border-radius: 10rpx 10rpx 0 0;		
	}
	.reflash{
		width: 286px;
		height: 30px;
		line-height: 20px;
		background-color: #FFFFFF;
		text-align: center;
		color: #999999;
		margin: 0 auto;
		font-size: 24rpx;
	}
	.bag-box{
		width: 286px;
		height: 40px;
		background-color: #EEEEEE;
		color: #333333;
		text-align: center;
		line-height: 40px;
		border-radius: 0 0 10rpx 10rpx;
		margin: 0 auto;
		font-size: 20rpx;
	}
	.bag-desc{
		width: 286px;
		height: 100px;
		background-color: #FFFFFF;
		margin: 70rpx auto;
		border-radius: 10rpx;
		color: #999999;
		text-align: left;
		padding: 35rpx;
		word-wrap: break-word;
		word-break: break-all;
	}
	.qrcode-box{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}

	.text {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-top: 12rpx;
		font-size: 34rpx;
	}
</style>
